<template>
	<a-card :bordered="false" :body-style="{ 'padding-bottom': '0px' }" class="mb-2">
		<a-form ref="formRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="统计时间：">
						<div style="display: flex;align-items: center;">
							<a-form-item style="flex: 1;margin-right:12px;" name="saleStartTime">
								<a-date-picker placeholder="请选择开始日期" class="block" format="YYYY-MM-DD"
											   v-model:value="searchFormState.saleStartTime" allow-clear/>
							</a-form-item>
							<a-form-item style="flex: 1" name="endTimeCreated">
								<a-date-picker placeholder="请选择结束日期" class="block" format="YYYY-MM-DD"
											   v-model:value="searchFormState.saleEndTime" allow-clear/>
							</a-form-item>
						</div>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="选择店铺">
						<a-select v-model:value="searchFormState.storeCode" :options="storeOptions" allow-clear/>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" html-type="submit" @click="table.refresh()">查询</a-button>
					<a-button style="margin: 0 8px" @click="() => formRef.resetFields()">重置</a-button>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<a-card :bordered="false" title="基础信息">
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			:scroll="{ x: 'calc(640px + 50%)', y: 640 }"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
		>
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" :loading="exporting" @click="exportFile()">导出</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'orgCode'">
					{{ $TOOL.tableData('ORG_CATEGORY', record.orgCode, 'code') }}
				</template>
				<template v-if="column.dataIndex === 'goodInfo'">
					<div>
						<div>商品编码：{{record.goodCode}}</div>
						<div>商品名称：{{record.goodName}}</div>
						<div>条码：{{record.barcode}}</div>
					</div>
				</template>
				<template v-if="column.dataIndex === 'grade'">
					<a-tag color="blue">
						{{record.grade}}
					</a-tag>
				</template>
				<template v-if="column.dataIndex === 'categoryInfo'">
					<div>
						<div>品类编码：{{record.categoryCode}}</div>
						<div>品类名称：{{record.categoryName}}</div>
					</div>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="form.onOpen(record)">编辑</a>
						<a-divider type="vertical"/>
						<a @click="form.onOpen(record, true)">详情</a>
						<a-divider type="vertical"/>
						<a-dropdown :trigger="['click']">
							<a type="link" @click.prevent>
								更多
								<DownOutlined/>
							</a>
							<template #overlay>
								<a-menu>
									<a-menu-item>
										<a-popconfirm title="确定要删除此卡券吗？" @confirm="remove(record)">
											<a-button type="link" danger size="small">删除</a-button>
										</a-popconfirm>
									</a-menu-item>
								</a-menu>
							</template>
						</a-dropdown>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>

	<a-card
		class="mt-2"
		style="width: 100%;"
		title="排行榜">
		<div class="card-container card-box">
			<a-tabs v-model:activeKey="activeRankTab" type="card">
				<a-tab-pane key="category" tab="分类排行">
					<a-row class="mb-2">Top10分类销售金额</a-row>
					<a-row :gutter="24">
						<a-col :span="8">
							<CategoryTable :load-data="loadCategorySaleData"/>
						</a-col>
						<a-col :span="16">
							<div id="BasicBar1"></div>
						</a-col>
					</a-row>
				</a-tab-pane>
				<a-tab-pane key="good" tab="商品排行"></a-tab-pane>
			</a-tabs>
		</div>

	</a-card>

	<!--	<a-row class="mt-2">-->
	<!--		<a-col :span="24">-->
	<!--			<a-card :bordered="false" title="销售趋势">-->
	<!--				<div id="area1"></div>-->
	<!--			</a-card>-->
	<!--		</a-col>-->
	<!--	</a-row>-->

</template>

<script setup name="goodSale">
	import CategoryTable from "@/views/bi/s2/CategoryTable.vue"
	import {Column, Bar, Area} from '@antv/g2plot'
	import {message} from 'ant-design-vue'
	import biApi from '@/api/bi/biApi'
	import tool from '@/utils/tool'
	import dayjs from 'dayjs'

	let searchFormState = reactive({
		saleStartTime: dayjs(new Date()).subtract(7, 'day'),
		saleEndTime: dayjs(new Date()).subtract(1, 'day'),
		storeCode: '0000'
	})
	import {onMounted} from 'vue'

	let barPlot1
	let barPlot2
	let areaPlot1

	onMounted(() => {
		barPlot1 = new Bar('BasicBar1', {
			data: [],
			xField: 'saleAmount',
			yField: 'categoryName',
			seriesField: 'categoryName',
			legend: {
				position: 'top-left'
			},
			label: {
				// 可手动配置 label 数据标签位置
				position: 'middle', // 'top', 'bottom', 'middle'
			}
		})
		barPlot1.render()
		loadCategorySaleData().then(res => {
			barPlot1.changeData(res)
		})


	})

	const rankTabList = ref([
		{
			key: 'category',
			title: '分类排行'
		},
		{
			key: 'good',
			title: '商品排行'
		}
	])

	const activeRankTab = ref('category')
	const table = ref(null)
	const exporting = ref(false)
	const toolConfig = {refresh: true, height: true, columnSetting: true, striped: true}
	const columns = [
		{
			title: '商品',
			dataIndex: 'goodInfo',
		},
		{
			title: '门店名称',
			dataIndex: 'orgCode',
			width: 160
		},
		{
			title: '分类',
			dataIndex: 'categoryInfo',
		},
		{
			title: '品牌',
			dataIndex: 'brandName',
			width: 120
		},
		{
			title: '产地',
			dataIndex: 'origin',
		},
		{
			title: '等级',
			align: 'center',
			dataIndex: 'grade',
			width: 100
		},
		{
			title: '销售情况',
			width: 240,
			children: [
				{
					title: '销售数量',
					align: 'center',
					dataIndex: 'saleCount',
					width: 120
				},
				{
					title: '销售金额',
					align: 'center',
					dataIndex: 'saleAmount',
					width: 120
				},
			]
		},
		{
			title: '当前库存',
			dataIndex: 'stock',
			width: 100,
			align: 'center'
		},
		{
			title: '基本陈列量',
			dataIndex: 'display',
			width: 100,
			align: 'center'
		}
	]

	let selectedRowKeys = ref([])

	// 列表选择配置
	const options = {
		alert: {
			show: false,
			clear: () => {
				selectedRowKeys = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}

	let storeOptions = tool
		.tableList('ORG_CATEGORY')
		.filter(item => item.category === 'STORE' || item.category === 'COMPANY')
		.map(item => {
			return {
				value: item['code'],
				label: item['name']
			}
		})

	const onTabChange = (value, type) => {
		console.log(value, type);
		if (type === 'activeRankTab') {
			activeRankTab.value = value;
		}
	};

	// 列表数据
	const loadData = (parameter) => {
		const params = Object.assign(parameter, searchFormState)
		if (params.saleStartTime) {
			params.saleStartTime = params.saleStartTime.format('YYYY-MM-DD')
		}
		if (params.saleEndTime) {
			params.saleEndTime = params.saleEndTime.format('YYYY-MM-DD')
		}
		return biApi.pageDailyGoodSale(params)
	}

	const loadCategorySaleData = () => {
		const params = Object.assign({}, searchFormState)
		if (params.saleStartTime) {
			params.saleStartTime = params.saleStartTime.format('YYYY-MM-DD')
		}
		if (params.saleEndTime) {
			params.saleEndTime = params.saleEndTime.format('YYYY-MM-DD')
		}
		return biApi.listDailyCategorySale(params)
	}

	const exportFile = () => {
		exporting.value = true
		const params = Object.assign({}, searchFormState)
		if (params.startTimeCreated) {
			params.startTimeCreated = params.startTimeCreated.format('YYYY-MM-DD')
		}
		if (params.endTimeCreated) {
			params.endTimeCreated = params.endTimeCreated.format('YYYY-MM-DD')
		}
		params.pageNo = null
		biApi.exportExcel('bi/dailyGoodSale/export', '门店日销售' + Date.now(), params).finally(_ => {
			exporting.value = false
		})
	}

</script>

<style lang="less" scoped>
	::v-deep .ant-table .ant-table-fixed-left {
		height: auto !important;
		bottom: 15px !important;

		&::before {
			background-color: #fff;
		}
	}

	::v-deep .card-container > .ant-tabs-card .ant-tabs-content {
		margin-top: -16px;
	}

	.card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
		padding: 16px;
		background: #fff;
	}

	.card-container > .ant-tabs-card > .ant-tabs-nav::before {
		display: none;
	}

	.card-container > .ant-tabs-card .ant-tabs-tab,
	[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab {
		background: transparent;
		border-color: transparent;
	}

	.card-container > .ant-tabs-card .ant-tabs-tab-active,
	[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
		background: #fff;
		border-color: #fff;
	}

	.card-box {
		padding: 24px;
		overflow: hidden;
		background: #f1f1f1;
	}

</style>
